<!DOCTYPE html>
<html>


<head>

    <!--引入公用模板-->
    <style>
        .close{
            position:absolute;
            top:0;
            right:0;
            cursor:pointer;
        }
    </style>
    <%- include ../taglib/layout-map.ejs %>


</head>

<body class="gray-bg"  data-spy="scroll" data-target="sidebarMenu">
<div class="wrapper wrapper-content"   style="padding:5px">
    <div id="fakeLoader"class="fakeloader" style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(52, 152, 219); z-index: 999; display: none;"><div class="fl spinner4" style="position: absolute; left: 682px; top: 364.5px;"></div></div>
    <div class="row animated fadeInDown">
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>轨迹回放</h5>
                    <div class="ibox-tools">
                    <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                    </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id='external-events'>
                        <div id="calendar" class=""></div>
                    </div>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" >
                        <div class="form-group">
                            <label class="col-sm-3 control-label">开始时间</label>
                            <div class="col-sm-8">
                                <input placeholder="开始时间" class="laydate-icon form-control layer-date" id="start">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">结束时间</label>
                            <div class="col-sm-8">
                                <input placeholder="结束时间" class="laydate-icon form-control layer-date" id="end">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-info btn-sm btn-select-row" type="button" onclick="queryHis()"><i class="fa fa-search"></i>查询</button>
                        </div>
                        <!--<div class="footer" >-->
                        <!--<button class="btn btn-info btn-sm btn-select-row" type="button"><i class="fa fa-search"></i>查询</button>-->

                        <!--</div>-->
                    </form>

                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备数据</h5>
                    <!--<div class="ibox-tools">-->
                    <!--<a class="collapse-link">-->
                    <!--<i class="fa fa-chevron-up"></i>-->
                    <!--</a>-->
                    <!--</div>-->
                </div>
                <div class="ibox-content">
                    <div class="input-group div-serch-input">
                        <input type="text" placeholder="请录入车牌号查询" class="input form-control" id="serchStr" value="<%=carNo%>">
                        <span class="input-group-btn">
                         <button type="button" class="btn btn btn-primary" onclick="query()"> <i class="fa fa-search"></i> 搜索</button></span>
                         <!--<button type="button" class="btn btn btn-primary" onclick="refcalendar()"> <i class="fa fa-search"></i> 测试刷新日历</button></span>-->
                    </div>
                    <div id='external-events  pre-scrollable'    style="height: 300px;overflow-y: scroll;">
                        <ul id="kindTree" class="ztree">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="ibox float-e-margins" >
                <!--<div class="ibox-title">-->
                <!--<h5>图例</h5>-->
                <!--</div>-->
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-md-12 stateArea" id="IdentificationInfo" style="padding:0;">
                            <div class="col-md-12 form-group">
                                <div class="col-md-4 col-sm-4 col-xs-4 stateIcon text-center tulipadding">
														<span class="offlineIconArea" style="cursor:pointer"
                                                              id="chooseMiss" type="button">
															<span class="btnImage iconArea offlineIcon_ico_docu"></span>离线
														</span>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4 btnPadding text-center tulipadding">
														<span class="onlineNotPositioningArea" style="cursor:pointer"
                                                              id="chooseNot" type="button">
															<span class="btnImage iconArea onlineNotPositioning_ico_docu"></span>未定位
														</span>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4 stateIcon text-center tulipadding">
														<span type="button" id="chooseAlam" style="cursor:pointer"
                                                              class="warningArea">
															<span class="btnImage iconArea warning_ico_docu"></span>报警
														</span>
                                </div>
                            </div>
                            <div class="col-md-12 form-group">
                                <div class="col-md-4 col-sm-4 col-xs-4 btnPadding text-center tulipadding">
														<span class="onlineDrivingArea" style="cursor:pointer"
                                                              id="chooseRun" type="button">
															<span class="btnImage iconArea onlineDriving_ico_docu"></span>行驶
														</span>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4 btnPadding text-center tulipadding">
														<span type="button" id="chooseStop" style="cursor:pointer"
                                                              class="onlineParkingArea">
															<span class="btnImage iconArea onlineParking_ico_docu"></span>停止
														</span>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4 btnPadding text-center tulipadding">
														<span type="button" id="chooseOverSeep" style="cursor:pointer"
                                                              class="speedLimitWarningArea">
															<span class="btnImage iconArea speedLimitWarning_ico_docu"></span>超速
														</span>
                                </div>
                            </div>
                            <legend></legend>
                            <!--0绿色是跑的，1红色是异常的，2灰色是离线的,3蓝色是停止的，-->
                            <div class="col-md-12 form-group">
                                <div class="col-md-3 col-sm-3 col-xs-3 btnPadding text-center tulipadding">
														<span class="onlineDrivingArea" style="cursor:pointer"
                                                              id="chooseRun" type="button">
															<span class="btnOnline iconArea1"></span>行驶
														</span>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-3 btnPadding text-center tulipadding">
														<span type="button" id="chooseStop" style="cursor:pointer"
                                                              class="onstopArea">
															<span class="btnStop iconArea1"></span>停止
														</span>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-3 btnPadding text-center tulipadding">
														<span type="button" id="chooseOverSeep" style="cursor:pointer"
                                                              class="offlineIconArea">
															<span class="btnOffline iconArea1"></span>离线
														</span>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-3 btnPadding text-center tulipadding">
														<span type="button" id="chooseOverSeep" style="cursor:pointer"
                                                              class="onlineParkingArea">
															<span class="btnError iconArea1"></span>异常
														</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-sm-8 clearfix"  style="padding-left:5px">
            <div class="row animated fadeInDown">
                <div class="col-sm-12 clearfix" style="padding-left:5px;margin-top: 2px;margin-bottom: 5px">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>地图监控</h5>
                        </div>
                        <div class="ibox-content"  style="height: 550px;padding:1px">

                            <!--<div >-->
                            <form role="form" class="form-inline ">

                                <button class="btn btn-info btn-sm btn-select-row" type="button" onclick="play()" id="playbtn"><i class="fa fa-play"></i> 播放</button>
                                <button class="btn btn-info btn-sm btn-select-row" type="button" onclick="pause()"  id="pausebtn"><i class="fa fa-pause"></i> 暂停</button>
                                <button class="btn btn-info btn-sm btn-select-row" type="button" onclick="stop()" id="stopbtn"><i class="fa fa-stop"></i> 停止</button>
                                <button class="btn btn-info btn-sm btn-select-row" type="button" >慢</button>
                                <!--<button class="btn btn-info btn-sm btn-select-row" type="button" onclick="fastForward()"><i class="fa fa-fast-forward"></i> 快进</button>-->
                                <!--<button class="btn btn-info btn-sm btn-select-row" type="button" onclick="fastBackward()"><i class="fa fa-fast-backward"></i> 快退</button>-->

                                <div id="blue" class="form-group"></div>
                                <button class="btn btn-info btn-sm btn-select-row" type="button" >快</button>
                                <div class="form-group">
                                    <label class="control-label">当前播放间隔</label>
                                </div>

                                <div class="form-group" style="width: 20px">
                                    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
                                </div>
                                <div class="form-group">
                                    <input name="status" type="checkbox" data-size="small" checked>屏蔽0速度
                                </div>
                                <button class="btn btn-info btn-sm btn-select-row" type="button" onclick="exportExcleHis()"><i class="fa fa-download"></i> 导出轨迹数据</button>
                                <button class="btn btn-info btn-sm btn-select-row" type="button" onclick="openFence()"><i class="fa fa-mail-reply"></i> 生成轨迹路线</button>

                            </form>
                            <div style="padding-left: 0px">
                                <form role="form" class="form-inline ">
                                    <div class="form-group" style="width: 110px" >
                                        低速  <input type="number" value="30"  style="width:40%" id="lowspeed" name="lowspeed" min="1" max="300" />KM/H
                                    </div>
                                    <div class="form-group"  style="width: 110px" >
                                        高速 <input type="number"  value="80"    style="width:40%" id="highspeed" name="highspeed" min="1" max="300" />KM/H

                                    </div>

                                    <div class="form-group">
                                        <label class="control-label">路线图例--></label>
                                        <!--<button class="btn btn-info btn-sm btn-select-row" type="button" >路线图例&ndash;&gt;</button>-->
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-success">低速</button>
                                        <button type="button" class="btn btn-sm btn-primary">正常</button>
                                        <button type="button" class="btn btn-sm btn-danger">高速</button>
                                    </div>

                                </form>
                            </div>
                            <div style="height: 500px;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">


                                <div id="map" style="height: 100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
                                </div>
                                <div id="app-right-top">
                                    <div id="user-center" class="ui3-user-center-wrap">
                                        <div class="avatar-abstract"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 clearfix" style="padding-left:1px;margin-top: 2px;margin-bottom: 0px">
                        <div class="ibox float-e-margins">
                            <!--<div class="ibox-title">-->
                                <!--<div>-->
                                    <!--<h5 id="warningRef">-->

                                    <!--</h5>-->
                                <!--</div>-->

                                <!--<div class="ibox-tools">-->
                                    <!--<a class="collapse-link">-->
                                        <!--<i class="fa fa-chevron-up"></i>-->
                                    <!--</a>-->
                                <!--</div>-->
                            <!--</div>-->
                            <div class="ibox-content">
                                <div class="tabs-container">
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">车辆历史信息</a>
                                        </li>
                                        <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">报警信息</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div id="tab-1" class="tab-pane active">
                                            <div class="panel-body">
                                                <div>
                                                    <div>
                                                        <table id="gpsTable"
                                                               class="table table-striped table-bordered table-hover dataTables-example">
                                                            <thead>
                                                            <tr>
                                                                <!--<th>-->
                                                                <!--</th>-->
                                                                <th>id</th>
                                                                <th>车牌号</th>
                                                                <th>定位时间</th>
                                                                <th>通信时间</th>
                                                                <th>用户</th>
                                                                <!--<th width="200px">对象类型</th>-->
                                                                <!--<th width="200px">ACC</th>-->
                                                                <th width="200px">状态</th>
                                                                <th>速度</th>
                                                                <th >方向</th>
                                                                <!--<th width="200px">当日里程</th>-->
                                                                <th>总里程</th>
                                                                <th>经度</th>
                                                                <th>纬度</th>
                                                                <!--<th width="200px">位置</th>-->
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="tab-2" class="tab-pane">
                                            <div class="panel-body">
                                                <table id="warningTable"
                                                       class="table table-striped table-bordered table-hover dataTables-example"style="    width: 900px;">
                                                    <thead>
                                                    <tr>
                                                        <th>
                                                        </th>
                                                        <th width="200px">id</th>
                                                        <th width="200px">车牌号</th>
                                                        <th width="200px">用户</th>
                                                        <th width="200px">对象类型</th>
                                                        <!--<th width="200px">类型</th>-->
                                                        <th width="200px">人员</th>
                                                        <th width="200px">时间</th>
                                                        <!--<th width="200px">位置</th>-->
                                                        <th width="200px">状态</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<div class="modal inmodal" id="myModal" role="dialog" data-width="300px"
     data-height="300px" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <h4 class="modal-title">设定当前轨迹为固定路线</h4>
            </div>
            <div class="modal-body" style="max-height: 300px; ">

                <form class="form-horizontal m-t" id="editForm" method="get">
                    <input id="id" name="id" type="hidden">
                    <input id="fenceType" name="fenceType" type="hidden">
                    <input id="memo" name="memo" type="hidden">
                    <input id="contentinfo" name="contentinfo" type="hidden">
                    <input id="h_c_car_id_f" name="fcarId" type="hidden">
                    <input id="h_c_start_f" name="fstart" type="hidden">
                    <input id="h_c_end_f" name="fend" type="hidden">
                    <input id="h_c_status_f" name="fstatus" type="hidden">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">线路名称</label>
                        <div class="col-sm-8">
                            <input id="settingname" name="settingname" class="form-control"
                                   placeholder="名称必填" type="text" aria-required="true"
                                   aria-invalid="true">
                        </div>
                    </div>
                    <div class="form-group" id="settingname_div">
                        <label class="col-sm-3 control-label">预计耗时(分钟)</label>
                        <div class="col-sm-8">
                            <input id="lineTime" name="lineTime" class="form-control"
                                   placeholder="预计耗时" type="text" number="true" value="0">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-white" onclick="closeModal()">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveFence()">保存</button>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="h_c_car_id" value="<%=carId%>">
<input type="hidden" id="h_all_car_id">
<%- include ../taglib/layout-content.ejs %>
<script type="text/javascript">
    var gpsTable;
    var warningTable;
    var lastHisMak=null;
    $(document).ready(function () {
        gpsTable = $('#gpsTable').dataTable({
            "lengthChange": true,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
//            "scrollY": "220px",//dt高度
//            "autoWidth": true,//自动宽度
            "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
//            "lengthChange": false,//是否允许用户自定义显示数量
            "ajax": {
                "url": "/map/carTabHisData",
                "dataSrc": "rows"
            },
//            "paging": true, // 禁止分页
            serverSide: true,
            columns: [
//                {
//                    "sClass": "text-center",
//                    "data": "id",
//                    'checkboxes': {
//                        'selectRow': true,
//                    },
//
//                },
                {"sClass": "text-center", data: 'id'},
                //禁止排序
                {"sClass": "text-center", data: 'baseCarNo', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'gpsDate', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'onlinetime', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'deptName', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'elType', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'baseCarNoColour'},
                {
                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                    var gpsPowerStatus = e.gpsPowerStatus;
                    var acc = e.accFlag;
                    var oneHigh = e.oneHigh;
                    var str=""
                    if(gpsPowerStatus == 1){
                        str="主电正常, "
                    }else{
                        str="主电异常, "
                    }
                    if (acc == 1) {
                        str = str+"点火, "
                    }else{
                        str = str+"熄火, "
                    }
                    if(oneHigh){
                        str=str+" 时长: "+oneHigh+"分钟"
                    }else{
                        str=str+" 时长: 0 分钟"
                    }



//                    var result = '<a class="btn btn-warning btn-rounded" >熄火</a>'
////                    车牌号颜色[1-4]黄白蓝黑
//                    if (d == 1) {
//                        result = '<a class="btn btn-default btn-rounded" >点火</a>'
//                    }
                    return str
                }, "bSortable": false, "orderable": false
                },
//                {
//                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
//                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    var d = e.accFlag;
//                    var result = '<a class="btn btn-warning btn-rounded" >关闭</a>'
////                    车牌号颜色[1-4]黄白蓝黑
//                    if (d == 1) {
//                        result = '<a class="btn btn-default btn-rounded" >开启</a>'
//                    }
//                    return result
//                }, "bSortable": false, "orderable": false
//                },
//                {
////                    online
//                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
//                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
////                    accFlag
//                    var d = e.online;
//                    var result = '<a class="btn btn-info btn-rounded" >在线</a>'
////                    车牌号颜色[1-4]黄白蓝黑
//                    if (d == 1) {
//                        result = '<a class="btn btn-info btn-rounded" >在线</a>'
//                    } else if (d == 0) {
//                        result = '<a class="btn btn-danger btn-rounded" >离线</a>'
//                    }
//                    return result
//                }, "bSortable": false, "orderable": false
//                },
                {"sClass": "text-center", data: 'speed', "bSortable": false, "orderable": false},


//                {"sClass": "text-center", data: 'driection', "bSortable": false, "orderable": false},

                {
//                    dir
                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    accFlag
                    var d = queryAngle(e.driection);

                    result = d;
                    return result;
                }, "bSortable": false, "orderable": false
                },



                {"sClass": "text-center", data: 'totalDis', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'jd', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'wd', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'oilTotal', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'memo', "bSortable": false, "orderable": false}
            ],
            //排序
//            'order': [[1, 'desc']],
            initComplete: function (setting, json) {
                //隐藏列
                visiblecolumn(this,0, false);
//                visiblecolumn(this,4, false);
//                visiblecolumn(this,11, false);
//                visiblecolumn(this,12, false);
//                visiblecolumn(6,false)
            },
        });
        $('#gpsTable tbody').on('click', 'tr', function () {
            $('#gpsTable tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    debugger;

                    $(this).removeClass('selected');
                } else {
                    debugger;
                    gpsTable.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                    var row = gpsTable.DataTable().rows('.selected').data()[0];
                    var jd = row.jd;
                    var wd = row.wd;
                    var addressDetail = "无详细地址信息!";
                    var myGeo = new BMap.Geocoder();
                    myGeo.getLocation(new BMap.Point(jd, wd), function (result) {
                        var content = '<div class="ibox float-e-margins">' +
                            '<div class="">' +
                            '<h5>实时信息</h5>' +
                            '</div>' +
                            '<div class="ibox-content"> ' +
//                            '<div class="ibox-content ">' +
                            '车牌号：' + row.baseCarNo + '<br/>' +
                            '定位时间：' + row.gpsDate + '<br/>' +
                            '行驶速度:' + row.speed + '<br/>' +
                            '经度:' + row.jd + '<br/>' +
                            '纬度:' + row.wd + '<br/>' +
                            '当前位置:' + addressDetail + '<br/>' +
                            '</div>' +
                            '</div>';
                        addHismapMark(jd, wd,content);
                    });

                }

            });

        });
        warningTable = $('#warningTable').dataTable({
            "lengthChange": true,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
//            "scrollY": "220px",//dt高度
//            "autoWidth": true,//自动宽度
            "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
//            "lengthChange": false,//是否允许用户自定义显示数量
            "ajax": {
                "url": "/map/hiswarnings",
                "dataSrc": "rows"
            },
            bAutoWidth:false,//取消自动宽度
            serverSide: true,
            columns: [
                {
                    "sClass": "text-center",
                    "data": "id",
                    'checkboxes': {
                        'selectRow': true,
                    },

                },
                {"sClass": "text-center", data: 'id'},
                //禁止排序
                {"sClass": "text-center", data: 'baseCarNo', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'deptName', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'elType', "bSortable": false, "orderable": false},
                {
//                    warningType
                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    debugger;
                    var d = e.warningType;
//                    1-驶入  2-驶出 3-超速 4-路线偏离 5-停车超时报警  6-疲劳驾驶报警 7-凌晨行车报警
                    var result = "";
                    if (d == 1) {
                        result = '驶入报警'
                    } else if (d == 2) {
                        result = '驶出报警'
                    } else if (d == 3) {
                        result = '超速报警'
                    } else if (d == 4) {
                        result = '路线偏离报警'
                    } else if (d == 5) {
                        result = '停车超时报警'
                    } else if (d == 6) {
                        result = '疲劳驾驶报警'
                    } else if (d == 7) {
                        result = '凌晨行车报警'
                    }
                    return '<a class="btn btn-danger btn-rounded" >' + result + '</a>'
                }, "bSortable": false, "orderable": false
                },
                {"sClass": "text-center", data: 'user_name', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'waringtime', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'jd', "bSortable": false, "orderable": false},
//                {"sClass": "text-center", data: 'wd', "bSortable": false, "orderable": false},
//                {
//                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
//
//                    var jd = e.jd;
//                    var wd = e.wd;
//                    var result = jd + wd;
//                    return result
//                }, "bSortable": false, "orderable": false
//                },
                {
                    "sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    debugger;
//                    accFlag
                    var d = e.type;
                    var result = '<a class="btn btn-info btn-rounded" >已处理</a>'
//                    车牌号颜色[1-4]黄白蓝黑
                    if (d == 1) {
                        result = '<a class="btn btn-info btn-rounded" >已处理</a>'
                    } else if (d == 0) {
                        result = '<a class="btn btn-warning btn-rounded" >未处理</a>'
                    }
                    return result
                }, "bSortable": false, "orderable": false
                }
            ],
            //排序
//            'order': [[1, 'desc']],
            initComplete: function (setting, json) {
                //隐藏列
                visiblecolumn(warningTable, 1, false);
//                visiblecolumn(warningTable,4, false);
//                visiblecolumn(12, false);
//                visiblecolumn(13, false);
//                visiblecolumn(6,false)
            },
        });
    });
    //    部门车辆树
    $(function () {
        var url='/tree/deptCar';
        init_tree('id','parentId','name',fnClick);
        loadMyTree(url);
//        $('body').everyTime('2das','refData',refData,0,true);
        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD hh:mm:ss',
//            min: laydate.now(), //设定最小日期为当前日期
            max: '2999-06-16 23:59:59', //最大日期
//            start: laydate.now(),
//            start: laydate.now() + ' 00:00:00',
            istime: true,
            istoday: false,
            festival: true, //是否显示节日
            choose: function (datas) {
                debugger;
                if(datas){
                    end.min =datas.substring(0,10)+" 00:00:00"
                    end.start = datas.substring(0,10)+" 00:00:00"
                }
//                end.min = datas; //开始日选好后，重置结束日的最小日期
//                end.start = datas //将结束日的初始值设定为开始日
            }
//            min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
//            max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
        };
        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD hh:mm:ss',
//            min: laydate.now(),
            max: '2999-06-16 23:59:59',
//            start: laydate.now() + ' 23:59:59',
            istime: true,
            istoday: false,
            festival: true, //是否显示节日
            choose: function (datas) {
                var st=$("#start").val();
                if(st>datas){
                    swal({
                        title: "系统提示",
                        text: "开始时间必须小于结束时间!",
                        type: "error"
                    });
//                    $("#end").val(laydate.now() + ' 23:59:59');
                }else{
                    start.max = datas.substring(0,10)+" 23:59:59"; //结束日选好后，重置开始日的最大日期
                }
            }
        };
        laydate(start);
        laydate(end);
        $("#start").val(laydate.now() + ' 00:00:00');
        $("#end").val(laydate.now() + ' 23:59:59');
//        $('[name="status"]')
        $("#playbtn").show();
        $("#pausebtn").hide();
        $("#stopbtn").hide();
    });
    //    隐藏列
    function visiblecolumn(table,c, visible) {
        table.DataTable().column(c).visible(visible)
    }
    /**
     * 树刷新数据
     */
    function query() {
//        debugger;
        search_ztree('kindTree','serchStr');
    }

</script>

<!--map-->
<script type="text/javascript">
    // 百度地图API功能
    var validator;
    var map;
    var carIocnPath="/js/mapPlugins/img/";
    var lastMark=[];
    var lastCarMark={};//终端数组
    var opts = {
        width : 200,     // 信息窗口宽度
        height: 330,     // 信息窗口高度
//        title : "实时信息" , // 信息窗口标题
        panel  : "panel",
        enableMessage:true,//设置允许信息窗发送短息
        searchTypes   :[
            BMAPLIB_TAB_SEARCH,   //周边检索
            BMAPLIB_TAB_TO_HERE,  //到这里去
            BMAPLIB_TAB_FROM_HERE //从这里出发
        ]
    };
    //    var carIcon="car_online0.fw";
    $(function () {
        map = new BMap.Map('map');
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.enableScrollWheelZoom();
        map.addControl(new BMap.MapTypeControl());



        var contextMenu = new BMap.ContextMenu();
        var txtMenuItem = [
            {
                text: '放大',
                callback: function () {
                    map.zoomIn()
                }
            },
            {
                text: '缩小',
                callback: function () {
                    map.zoomOut()
                }
            },
            {
                text: '放置到最大级',
                callback: function () {
                    map.setZoom(18)
                }
            },
            {
                text: '查看全国',
                callback: function () {
                    map.setZoom(4)
                }
            },
            {
                text: '在此添加标注',
                callback: function (p) {
                    var marker = new BMap.Marker(p), px = map.pointToPixel(p);
                    map.addOverlay(marker);
                }
            }
        ];
        for (var i = 0; i < txtMenuItem.length; i++) {
            contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
            if (i == 1 || i == 3) {
                contextMenu.addSeparator();
            }
        }
        map.addContextMenu(contextMenu);
        // 创建控件
        var myZoomCtrl = new ZoomControl();
        // 添加到地图当中
        map.addControl(myZoomCtrl);
        var jw='<%=jw%>';
        initPoint(jw);
        //验证
        var cusrules = {
            rules: {
                settingname: {
                    required: true,
                },
                lineTime: {
                    required: true,
                },
            },
            messages: {
                settingname: {
                    required: icon + "请输入名称"
                },
                lineTime: {
                    required: icon + "请输入时间"
                },
            }

        };
        validator = $("#editForm").validate(cusrules);

    });


    //    树节点选中
    var fnClick=function (event, treeId, treeNode) {
//        tree_Obj.checkNode(treeNode, !treeNode.checked, true);
        selectTreeNode(treeNode);

    }
    function selectTreeNode(treeNode) {
        var isCar=treeNode.isCar
        if(isCar){
            $("#h_c_car_id").val(treeNode.id);
            refcalendar();
//            queryCarsByNo(ids);
        }
//        queryCars();
//        if(!tChecked){
//            cleanAll()
//        }
    }

    //刷新车辆列表
    function queryCars(carId,startTime,endTime,status) {
        var jsonstr = [{"carId": carId},{"startTime":startTime},{"endTime":endTime},{"status":status}];
        gpsTable.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
    }
    //刷新报警列表
    function querywarnings(carId,startTime,endTime) {
        var jsonstr = [{"carId": carId},{"startTime":startTime},{"endTime":endTime}];
        warningTable.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
    }

    var refData=function refCarsById() {
        var carId=$("#h_c_car_id").val();
//        queryCarsByNo(carId);
        querywarnings();
    }

//    查询按钮查询历史数据
    function queryHis() {
        var carId=$("#h_c_car_id").val();
        var start=$("#start").val();
        var end=$("#end").val();
        var status=$('[name="status"]').is(':checked');
        if(carId && carId!="0"){
            refHisMap(carId,start,end,status)
            queryCars(carId,start,end,status);
            querywarnings(carId,start,end);

        }else{
            swal({
                title: "系统提示",
                text: "请选择车辆!",
                type: "error"
            });
        }
    }
    function exportExcleHis() {
        var carId=$("#h_c_car_id").val();

        var start=$("#start").val();
        var end=$("#end").val();
        var status=$('[name="status"]').is(':checked');
        if(!carId){
            swal({
                title: "系统提示",
                text: "请选择车辆!",
                type: "error"
            });
            return false;
        }
        if(!start){
            swal({
                title: "系统提示",
                text: "请选择开始时间!",
                type: "error"
            });
            return false;
        }
        if(!end){
            swal({
                title: "系统提示",
                text: "请选择结束时间!",
                type: "error"
            });
            return false;
        }
        window.open("<%= serverurl%>/carHisExcel/exportExcel?carId="+carId+"&start="+start+"&end="+end+"&status="+status)

    }
    function openFence() {
        var carId=$("#h_c_car_id").val();

        var start=$("#start").val();
        var end=$("#end").val();
        var status=$('[name="status"]').is(':checked');
        if(!carId){
            swal({
                title: "系统提示",
                text: "请选择车辆!",
                type: "error"
            });
            return false;
        }
        if(!start){
            swal({
                title: "系统提示",
                text: "请选择开始时间!",
                type: "error"
            });
            return false;
        }
        if(!end){
            swal({
                title: "系统提示",
                text: "请选择结束时间!",
                type: "error"
            });
            return false;
        }
        $("#myModal").modal("show");
        $("#h_c_car_id_f").val(carId);
        $("#h_c_start_f").val(start);
        $("#h_c_end_f").val(end);
        $("#h_c_status_f").val(status);
        $("#contentinfo").val("");
        $("#fenceType").val("4");
        $("#memo").val("");
        $("#lineTime").val(0);
    }
    function saveFence() {
        $('#editForm').ajaxSubmit({
            type: 'post', // 提交方式 get/post
            dataType: 'json',
            url: '/map/saveFence', // 需要提交的 url
            beforeSubmit: function (formData, jqForm, options) {
                if (!$("#editForm").valid()) {
                    return false;
                }
            },
            success: function (data) {
                // data 保存提交后返回的数据，一般为 json 数据
                // 此处可对 data 作相关处理
                if (data.success) {
                    swal({
                        title: "系统提示",
                        text: data.msg,
                        type: "success"
                    });
                    $("#myModal").setDefForm(validator);
                    $('#editForm').clearForm(true);
                    $("#myModal").modal("hide");
                    query();
                } else {
                    swal({
                        title: "系统提示",
                        text: data.msg,
                        type: "error"
                    });
                }
                clearAlldrawingModes();

            },

        });
    }
    function closeModal() {
        $("#myModal").setDefForm(validator);
        $("#myModal").modal("hide");
    }
    function refHisMap(carId,start,end,status){
//        swal({
//            title: "系统提示",
//            text: "正在查询车辆请稍后",
//            type: "error"
//        });
        loadingfn(1000);
        cleanHis();
        $.ajax({
            url: '/map/carHisData',
            dataType: 'json',
            type: "GET",
            data: {
                carId: carId,
                start: start,
                end: end,
                status:status,

            },
            success: function (resdata) { // 获取当前月的数据
                debugger;
                //添加数据
                var data = resdata.rows;
                $.each(data ,function (key, value) {
                    addHisData(value.jd,value.wd,value.driection, value.gpsDate, value.speed,value.baseCarNo,value.accFlag,value.oneHigh,value.gpsPowerStatus);
                });
                var lowspeed=$('#lowspeed').val();
                var highspeed=$('#highspeed').val();
                $('body').oneTime('2s','D',function(){

                    cleanAll();

                    //画线
                    drawpolygon(lowspeed,highspeed);
                });

            }
        });
    }

    var histime=20;

//    播放
    function play() {
        var carId=$("#h_c_car_id").val();
        if(carId && carId!="0"){
            $('body').everyTime('5s','A',function(){
                onPlay();
            });
            $("#playbtn").hide();
            $("#pausebtn").show();
            $("#stopbtn").show();
        }else{
            swal({
                title: "系统提示",
                text: "请选择车辆或录入手机号查询轨迹",
                type: "error"
            });
        }


    }
//    停止
    function stop() {
        $('body').stopTime ('A');
        onReset();
        $("#playbtn").show();
        $("#pausebtn").hide();
        $("#stopbtn").hide();

    }
//    暂停
    function pause() {
        $('body').stopTime ('A');
        $("#playbtn").show();
        $("#pausebtn").hide();
        $("#stopbtn").show();
//        $('body').everyTime('5s','A',function(){
//            onPause();
//        });
    }
    function refreshSider(event ,ui) {
        var value=ui.value;
        var ss=60-parseInt(value);
        $( "#amount" ).val( ss );
        if(points){
            $('body').stopTime ('A');

            $('body').everyTime(ss+'s','A',function(){
                onPlay();
            });
        }else {
            swal({
                title: "系统提示",
                text: "请选择车辆或录入手机号查询轨迹",
                type: "error"
            });
        }


    }
//    快进
    function fastForward() {
        $('body').stopTime ('A');
        histime = histime - 5;
        if(histime<0){
            histime = 1;
        }
        $('body').everyTime(histime+'s','A',function(){
            onPlay();
        });
    }
//    快退
    function fastBackward() {
        $('body').stopTime ('A');
        histime = histime + 5;
        if(histime>=20){
            histime = 20;
        }
        $('body').everyTime(histime+'s','A',function(){
            onPlay();
        });
    }

    function loadingfn(time) {
        swal({
            title: "正在加载请稍后",
//            text: "大约需要3秒",
            timer: time,
            showConfirmButton: true
        });
    }
</script>
<!--滑块-->
<script type="text/javascript">
    $(document).ready(function () {
        $( "#blue" ).slider({
            orientation: "horizontal",
            range: "min",
            min:10,
            max: 60,
            value: 55,
            slide: refreshSider,
//            change: refreshSwatch
        });
        $( "#amount" ).val( "5" );
//        $( "#blue" ).slider( "value", 25 );
//        $("#blue").ionRangeSlider({
//            min: 0,
//            max: 10,
//            type: 'single',
//            step: 0.1,
//            postfix: " 克",
//            prettify: false,
//            hasGrid: true
//        });
    });

</script>
<!--日历组件-->
<script>
    var isFlag=false;
    var hiscalendar;
    var canlendarObj={};

    $(document).ready(function () {
        /* initialize the calendar
          -----------------------------------------------------------------*/
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
//        {
//            title: '长事件',
//                start: new Date(y, m, d - 5),
//            end: new Date(y, m, d - 2),
//        },
        canlendarObj = {
            header: {
                left: 'prev,next',
                center: 'title',
//                right: 'month,agendaWeek,agendaDay,listMonth'
                right: 'month,listMonth'
            },
//            defaultDate: '2017-05-12',
            locale: 'zh-cn',
            buttonIcons: false, // show the prev/next text
            navLinks: false, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            contentHeight: 340,
            eventClick:canlendar_evensclick
        };
//        events:evens,
//        canlendarObj.events=canlendar_evens;
            $('#calendar').fullCalendar(canlendarObj);

    });
//    获取历史数据
    function getHistory() {

    }
//    更新日历数据 点击树查询数据切换到月
    function refcalendar() {
//        $("#h_c_car_id").val("1");
        //调用后台获取数据 获取carId下最近的数据
        var carId=$("#h_c_car_id").val();
        $.ajax({
            url: '/map/carMonth',
            dataType: 'json',
            type: "post",
            data: {
                carId: carId,

            },
            success: function (data) { // 获取当前月的数据
                var events = [];
                if (data.success) {
//                    debugger;
                    var month = data.month;
                    $('#calendar').fullCalendar('changeView', 'month', month);
                    $('#calendar').fullCalendar( 'removeEventSource', canlendar_evens);
                    $('#calendar').fullCalendar( 'addEventSource', canlendar_evens);
                    $('#calendar').fullCalendar( 'refetchEvents' );
                } else {
                    swal({
                        title: "系统提示",
                        text: data.msg,
                        type: "error"
                    });
                }
            }
        });
//        $('#calendar').fullCalendar('changeView', 'month', month);

    }
    var canlendar_evensclick=function (event) {
//        debugger;
        var startTime=event.start.format('YYYY-MM-DD');
        var endTime=event.start.format('YYYY-MM-DD');
        var carId=event.carId;
        var status=$('[name="status"]').is(':checked');

        //刷新地图和列表数据
        queryCars(carId,startTime,endTime,status);
        querywarnings(carId,startTime,endTime);
        refHisMap(carId,startTime,endTime,status);

    }
    var canlendar_evens=function  (start, end, timezone, callback) {
        var date = this.getDate().format('YYYY-MM');
        var carId=$("#h_c_car_id").val();
        $.ajax({
            url: '/map/cardatas',
            dataType: 'json',
            type: "post",
            data: {
                carId: carId,
                date: date,
            },
            success: function (data) { // 获取当前月的数据
                var events = [];
                if (data.success) {
                    var resData = data.data;
                    $.each(resData, function (key, value) {
                        events.push({
                            title: value.mile,
                            carId: carId,
                            start: value.start
                            // will be parsed
//                            color: '#FFEBAC'
                        });
                    });
                } else {
                    swal({
                        title: "系统提示",
                        text: data.msg,
                        type: "error"
                    });
                }
                callback(events);
            }
        });
    };

</script>
<script>
    $(function () {

        if(parent && parent.mainName && parent.mainName=="main"){
            parent.menuclick();
        }
    });


</script>
</body>

</html>
